<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="650" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';

    /**
     * Helper function to draw a filled triangular arrowhead.
     * @param {CanvasRenderingContext2D} ctx - The canvas context.
     * @param {number} x - The x-coordinate of the arrowhead's tip.
     * @param {number} y - The y-coordinate of the arrowhead's tip.
     * @param {number} angle - The angle of the arrowhead in radians.
     * @param {number} size - The length of the arrowhead from tip to base.
     */
    function drawFilledArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0); // Tip
        ctx.lineTo(-size, -size * 0.4);
        ctx.lineTo(-size, size * 0.4);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Main Drawing ---

    // 1. Draw Road (East-West)
    const roadY = 120;
    ctx.font = '24px KaiTi'; // Font for Chinese characters
    ctx.fillText('西', 30, roadY);
    ctx.beginPath();
    ctx.moveTo(60, roadY);
    ctx.lineTo(600, roadY);
    ctx.stroke();
    ctx.fillText('东', 620, roadY);

    // 2. Draw Car B
    const carX = 480;
    const carHeight = 20;
    const carWidth = 60;
    const wheelRadius = 5;
    const carBodyY = roadY - carHeight - wheelRadius;
    
    // Car Label
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('B', carX, carBodyY - 15);

    // Car Body
    ctx.strokeRect(carX - carWidth / 2, carBodyY, carWidth, carHeight);

    // Car Wheels
    ctx.beginPath();
    ctx.arc(carX - carWidth / 4, roadY - wheelRadius, wheelRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(carX + carWidth / 4, roadY - wheelRadius, wheelRadius, 0, 2 * Math.PI);
    ctx.fill();
    
    // 3. Draw Velocity Vector v
    const vY = carBodyY - 20;
    const vStartX = carX - 30;
    const vEndX = vStartX - 50;
    
    // Vector Label
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('v', (vStartX + vEndX) / 2, vY - 15);

    // Vector Arrow
    ctx.beginPath();
    ctx.moveTo(vStartX, vY);
    ctx.lineTo(vEndX, vY);
    // Arrowhead
    ctx.moveTo(vEndX, vY);
    ctx.lineTo(vEndX + 10, vY - 5);
    ctx.moveTo(vEndX, vY);
    ctx.lineTo(vEndX + 10, vY + 5);
    ctx.stroke();

    // 4. Draw House H and Line L
    const hProjX = 300; // x-coordinate of H's projection on the road
    const houseY = 280; // y-coordinate of H
    
    // Dashed Line L
    ctx.save();
    ctx.beginPath();
    ctx.setLineDash([6, 6]);
    ctx.moveTo(hProjX, roadY);
    ctx.lineTo(hProjX, houseY);
    ctx.stroke();
    ctx.restore();

    // Point H
    ctx.beginPath();
    ctx.arc(hProjX, houseY, 6, 0, 2 * Math.PI);
    ctx.fill();

    // Labels L and H
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.fillText('L', hProjX + 15, (roadY + houseY) / 2);
    ctx.fillText('H', hProjX + 15, houseY);
    ctx.textAlign = 'center'; // Reset alignment

    // 5. Draw Incoming Wave from Southwest
    const waveEndX = hProjX;
    const waveEndY = houseY;
    // Calculate start point to represent a line from SW
    const waveStartX = 50;
    const waveStartY = waveEndY + (waveEndX - waveStartX) * 0.7; // SW has positive slope

    // Wave Line
    ctx.beginPath();
    ctx.moveTo(waveStartX, waveStartY);
    ctx.lineTo(waveEndX, waveEndY);
    ctx.stroke();

    // Arrowhead on the wave line
    const arrowPointX = (waveStartX + waveEndX) / 2;
    const arrowPointY = (waveStartY + waveEndY) / 2;
    const waveAngle = Math.atan2(waveEndY - waveStartY, waveEndX - waveStartX);
    drawFilledArrowhead(ctx, arrowPointX, arrowPointY, waveAngle, 15);

</script>
</body>
</html>